<script setup>
/**
 * & 文件引入区域
 */
import { ref } from "vue";
import { useRouter } from "vue-router";
/**
 * & 注册区
 */
defineProps([
  "top_boxShadow",
  "isScreen",
  "title",
  "isSeeAll",
  "topNum",
  "bg",
  "data",
]);

/**
 * & 变量声明区
 */
let router = useRouter();

/**
 * & 函数区
 */
const goDetailsFun = (id) => {
  router.push({
    path: "/details",
    query: { id },
  });
};

</script>

<template>
  <!-- 
    商品列表组件props说明：
    top_boxShadow: 组件的top值，用来判断是否给阴影,若组件是在页面顶部，一般传0即可
    isScreen: 是否显示筛选框，不写默认不显示
    isSeeAll: 是否显示seeAll按钮，不写默认不显示
    title: 是否显示标题，不写默认不显示
    topNum: 粘性定位值，不写默认不定位
    bg: 背景颜色
    data: 渲染的数据

    后期还会更新商品数据的传入等props
  -->

  <!-- 商品列表 -->
  <div :class="['products', top_boxShadow ? 'top_boxShadow' : '']" :style="{ background: bg }" v-if="data">
    <div class="top" :style="{
      position: 'sticky',
      top: topNum + 'rem',
    }">
      <div class="title" v-if="title" ref="products_title">
        {{ title }}
      </div>

      <slot name="selectBox" />
    </div>

    <div class="productsList" transition-duration="0s" v-if="data">
      <div class="seeAll" @click="$emit('seeAllFun')" v-if="isSeeAll">
        <span>See All</span>
        <img src="/images/Home/seeAllbtn.png" alt="" class="btn" />
      </div>

      <div class="item" v-for="item in data" :key="item.commodityId" @click="goDetailsFun(item.commodityId)">
        <div class="img">
          <img v-lazy="item.originPath" alt="" />
          <div class="PiLogo" v-show="item.membership">Pi</div>
        </div>

        <div class="info">
          <div class="title">{{ item.shopCommodityName }}</div>

          <div class="subTitle">
            {{ item.details }}
          </div>

          <div class="price" v-if="item.sku?.[0]?.piPrice">
            <span class="title">Pi </span>
            <span class="num">{{ (item.sku[0].piPrice || 0).toFixed(5) }}</span>
          </div>

          <div class="price" v-if="item.sku?.[0]?.price">
            <span class="title" style="font-size: 10rem">eCNY</span>
            <span class="num">{{ (item.sku[0].price || 0).toFixed(2) }}</span>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.products {
  width: 100%;

  &.top_boxShadow .top {
    >.title {
      background: #fff;
    }

    .selectBox {
      box-shadow: 0rem 10rem 10rem -5rem rgba(170, 170, 170, 0.3);
    }
  }

  .top {
    margin-bottom: 10rem;
    position: relative;
    z-index: 100;

    >.title {
      background: #fff;
      font-size: 20rem;
      padding: 16rem;
      line-height: 28rem;
      font-weight: 500;
    }
  }

  .productsList {
    box-sizing: border-box;

    padding: 16rem 16rem 100rem;
    width: 100%;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    >.seeAll {
      display: flex;
      flex-direction: column;
      padding: 12rem 8rem 8rem 12rem;
      border-radius: 12rem;
      box-shadow: 0rem 10rem 10rem -7rem rgba(226, 226, 226, 0.3);
      margin-bottom: 8rem;

      >span {
        font-size: 16rem;
        line-height: 16rem;
        font-weight: 500;
      }

      .btn {
        width: 16rem;
        margin-top: 24rem;
        align-self: flex-end;
      }
    }

    >.item {
      width: 48%;
      /* 每个项的宽度占满列宽 */
      background: #fff;
      margin-bottom: 10rem;

      display: inline-block;
      border-radius: 12rem;

      position: relative;

      >.img {
        width: 100%;

        border-radius: 12rem 12rem 0 0;
        overflow: hidden;

        >img {
          width: 100%;
          height: 110rem;
          object-fit: cover;
        }

        >.PiLogo {
          position: absolute;
          left: 0;
          top: 0;

          padding: 1rem 12rem;

          font-size: 14rem;
          font-weight: 500;
          line-height: 20rem;
          color: #fff;

          background: #642e8e;
          border-radius: 8rem 0rem 8rem 0rem;
        }
      }

      >.info {
        padding: 4rem 8rem;
        border-radius: 0 0 12rem 12rem;
        box-shadow: 0rem 5rem 10rem -3rem rgba(200, 200, 200, 0.5);

        >.title {
          font-size: 14rem;
          line-height: 20rem;
          font-weight: 500;
          margin-bottom: 4rem;
          color: rgba(51, 51, 51, 1);

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .subTitle {
          font-size: 12rem;
          line-height: 14rem;
          font-weight: 400;
          margin-bottom: 2rem;
          color: rgba(153, 153, 153, 1);

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .price {
          >.title {
            font-size: 14rem;
            line-height: 28rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
          }

          .num {
            font-size: 20rem;
            line-height: 28rem;
            font-weight: 500;
            // color: rgba(10.5, 46, 142, 1);
            color: #642e8e;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
